Vesper: Measuring Time-to-Interactivity for Modern Web Pages

Everyone agrees that web pages should load more quickly. However, a good definition for “page load time” is elusive. We argue that, in a modern web page, load times should be defined with respect to interactivity: a page is “loaded” when above-the-fold content is visible and the associated JavaScript event handling state is functional. We define a new load time metric, called Ready Index, which explicitly captures our proposed notion of load time. Defining the metric is straightforward, but actually measuring it is not, since web developers do not explicitly annotate the JavaScript state and the DOM elements which support interactivity. To solve this problem, we introduce Vesper, a tool which rewrites a page’s JavaScript and HTML to automatically discover the page’s interactive state. Armed with Vesper, we compare Ready Index to prior load time metrics like Speed Index; we find that, across a variety of network conditions, prior metrics underestimate or overestimate the true load time for a page by 24%–64%. We also introduce a tool that optimizes a page for Ready Index, decreasing the median time to page interactivity by 29%–32%.